<template>
  <div class="app-container">

    <h2 style="text-align: center;">发布新课程</h2>
    <el-steps :active="1" process-status="wait" align-center style="margin-bottom: 40px;">
      <el-step title="填写课程基本信息"/>
      <el-step title="创建课程大纲"/>
      <el-step title="提交审核"/>
    </el-steps>

    <el-form label-width="120px">
      <el-form-item label="课程标题">
        <el-input v-model="courseInfo.title" placeholder=" 示例:机器学习项目课:从基础到搭建项目"/>
      </el-form-item>

      <!-- 所属分类  -->
      <el-form-item label="一级分类">
        <el-select v-model="courseInfo.subjectParentId" placeholder="一级分类" @change="subjectChangeTwoLevel">
          <el-option
            v-for="subjectParent in subjectParentList"
            :key="subjectParent.id"
            :label="subjectParent.title"
            :value="subjectParent.id"
          >
          </el-option>
        </el-select>

        <el-select v-model="courseInfo.subjectId" placeholder="二级分类" style="margin-left: 30px" @change="twoLevelId">
          <el-option
            v-for="subject in subjectList"
            :key="subject.id"
            :label="subject.title"
            :value="subject.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <!--<el-form-item label="二级分类">-->

      <!--</el-form-item>-->

      <el-form-item label="课程讲师">
        <!-- 课程讲师  -->
        <el-select v-model="courseInfo.teacherId" placeholder="请选择">
          <el-option
            v-for="teacher in teacherList"
            :key="teacher.id"
            :label="teacher.name"
            :value="teacher.id"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="总课时">
        <el-input-number :min="0" v-model="courseInfo.lessonNum" controls-position="right"/>
      </el-form-item>
      <!-- 课程简介 -->
      <el-form-item label="课程简介">
        <el-input v-model="courseInfo.description"/>


      </el-form-item>
      <!-- 课程封面 TODO -->
      <el-form-item label="课程价格">
        <el-input-number :min="0" v-model="courseInfo.price" controls-position="right"/>
      </el-form-item>
      <el-form-item>
        <el-button :disabled="saveBtnDisabled" type="primary" @click="saveOrUpdate">保存并下一步</el-button>
        <!--<el-button :disabled="cleanBtnDisabled" type="primary" @click="cleanInfo">清空</el-button>-->
      </el-form-item>
    </el-form>

  </div>
</template>

<script>
import course from '@/api/edu/course'
import subject from '@/api/edu/subject'
import chapter from '@/api/edu/chapter'

export default {
  data() {
    return {
      courseInfo: {
        title: '',
        subjectId: '', // 二级分类id
        subjectParentId: '', // 一级分类id
        teacherId: '',
        lessonNum: 0,
        description: '',
        cover: '',
        price: 0
      },
      teacherList: [],
      subjectParentList: [],  // 一级分类列表
      subjectList: [],        // 二级分类列表
      saveBtnDisabled: false, // 保存按钮是否禁用
      courseId: '',            // 课程id
      cleanBtnDisabled: true  // 清空按钮是否禁用

    }
  },
  created() {
    this.findAllTeacherList()
    // console.log('info created'),
    this.getSubjectList()
    if (this.$route.query && this.$route.query.courseId) {
      this.courseId = this.$route.query.courseId
      this.getCourseById(this.courseId)
    }
  },
  // watch: {
  //   deep: true,
  //   courseInfo: function() {
  //     if (this.courseInfo !== {}) {
  //       this.cleanBtnDisabled = false
  //     }
  //     // console.log("courseInfo change!")
  //   }
  // }
  // ,
  methods: {
    // 点击某个一级分类，触发change，显示对应的二级分类
    subjectChangeTwoLevel(value) {
      // value就是一级分类的id值
      // 会自动传入id
      // console.log(value)
      // console.log(this.subjectParentList)
      for (let i = 0; i < this.subjectParentList.length; i++) {
        let oneSubject = this.subjectParentList[i]
        // console.log(oneSubject)
        if (oneSubject.id === value) {
          this.subjectList = oneSubject.children
          this.courseInfo.subjectId = ''
        }
      }
      // console.log(this.subjectList)

    },
    twoLevelId(value) {
      // 二级分类的id
      // console.log(value)
    },

    // 添加课程
    addCourse() {
      course.saveCourseInfo(this.courseInfo)
        .then(response => {
          this.$message.success('课程信息添加成功～')
          const courseId = response.data.courseId
          // console.log(response)
          // this.$router.push({ name: 'chapter', params: { id: courseId } })       // 跳转参数不可见
          // console.log(this.$route.params.id)
          // console.log(response)
          return response
        })
        .then(response => {
          this.$router.push({ name: 'chapter', query: { courseId: response.data.courseId } })  // 跳转参数可见
          // console.log(response)

        })
        .catch(error => {
          console.log(error)
          this.$message.error('课程信息添加失败!')
          this.courseInfo = {}
        })
    },
    // 修改课程
    updateCourse() {
      course.updateCourseInfo(this.courseInfo)
        .then(response => {
          this.$message.success('课程信息修改成功～')
          this.$router.push({ name: 'chapter', query: { courseId: this.courseId } })  // 跳转参数可见
        })

    },

    saveOrUpdate() {
      // console.log('next')
      if (this.courseId) {
        this.updateCourse()
      } else {
        this.addCourse()
      }

    },
    async findAllTeacherList() {
      const result = await course.findAllTeacher()
      // console.log(result)
      this.teacherList = result.data.items
      // console.log(this.teacherList)
    },
    async getSubjectList() {
      const result = await subject.getSubjectList()
      // console.log(result)
      this.subjectParentList = result.data.list
      // this.subjectList = result.data.list.children
      // console.log(this.subjectParentList)
    },

    //回显时得到一级分类和二级分类
    async getOneAndTwoSubject() {

    },

    // 根据课程id查询课程信息
    getCourseById(courseId) {
      course.getCourseById(courseId)
        .then(result => {
          // console.log(result)
          this.courseInfo = result.data.courseInfoVo
          subject.getSubjectList()

          // 初始化分类列表
          subject.getSubjectList()
            .then((responseSubject) => {
              this.subjectParentList = responseSubject.data.list
              this.subjectParentList.forEach(item => {
                // console.log(item)
                if (item.id == this.courseInfo.subjectParentId) {
                  this.subjectList = item.children
                  // console.log(this.subjectList)
                }
              })
            })
        })
    },
    cleanInfo() {
      this.courseInfo = {}
      this.cleanBtnDisabled = true
    }
  }
}

</script>

